import React, { Dispatch, SetStateAction } from "react";
import { Button, Form, Input, message, Space } from "antd";
import { register } from "../../api/modules/login";

type FieldType = {
  username?: string;
  password?: string;
};
interface RegisterProps {
  setStatus: Dispatch<SetStateAction<boolean>>;
}
const Login: React.FC<RegisterProps> = (props: any) => {
    const { setStatus } = props;

    const onFinish = async (values: any) => {
        const result = await register(values);
        if (result.code === 200) {
            setStatus(false);
            message.success("注册成功");
        } else {
            message.error("用户已存在");
        }
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log("Failed:", errorInfo);
    };
    return (
        <Form
            name="basic"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >
            <Form.Item<FieldType>
                label="用户名"
                name="username"
                rules={[ { required: true, message: "请输入用户名" } ]}
            >
                <Input />
            </Form.Item>

            <Form.Item<FieldType>
                label="密码"
                name="password"
                rules={[ { required: true, message: "请输入密码" } ]}
            >
                <Input.Password />
            </Form.Item>
            <Space className="login-btn">
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
            注册
                    </Button>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="link" onClick={() => setStatus(false)}>
            已有账号？返回登陆
                    </Button>
                </Form.Item>
            </Space>
        </Form>
    );
};
export default Login;
